import { Form, Input, Button, message } from 'antd'
import { apiSign } from '../api'
import { useNavigate } from 'react-router-dom'


const Sign = () => {

    const navigate = useNavigate()

    // data: 输入框中的内容
    const onFinish = (data) => {
        apiSign(data).then(res => {
            message.success('注册成功，3秒钟后回到登录页面')

            setTimeout(() => {
                navigate('/login')
            }, 3000)
        })
    }

    return <div>
        <h1>注册:</h1>
        <Form
            // 验证成功的回调函数
            onFinish={onFinish}
        >
            <Form.Item
                label="账户"
                name="username"
                rules={[
                    { required: true, message: '请输入账户' }
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
                rules={[
                    { required: true, message: '请输入密码' }
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="确认"
                name="okPassword"
                hasFeedback
                rules={[
                    // 非空校验
                    { required: true, message: '请确认密码' },
                    // 自定义校验 返回一个promise
                    (data) => ({
                        // data: 当前form表单的实例
                        // 自定义校验规则
                        // getFieldValue：获取出自己之外其他formItem中的内容
                        // getFieldValue("formItem.name")
                        // 当前输入框中的内容

                        // _ 当前验证的表单信息 value：当前输入框中输入的内容
                        validator(_, value) {
                            // 通过 getFieldValue 获取 password 输入框中输入的内容
                            // value:如果value为空的话 说明用户还没有输入  
                            if (!value || data.getFieldValue('password') === value) {
                                return Promise.resolve()
                            }
                            return Promise.reject(new Error('两次输入的密码不一致'))
                        }
                    })
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item>
                <Button htmlType="submit">注册</Button>
            </Form.Item>
        </Form>
    </div>
}

export default Sign